<template>
	<!-- 单个视频自定义组件 -- 付小清 -->
	<view class="datum line">
		<view class="top fboxRow" @tap="pageto">
			<view v-if="innerData.ks == 1" class="type color-fff bg-FFBC44 font20">
				<text class="bksCIcon bks-c-ziyuan37bofang font20" style="margin-right: 5rpx"></text>
				<text>{{innerData.duration || '00:00'}}</text>
			</view>
			<image class="avatarImg" :src="innerData.img" mode="aspectFill"></image>
			<view class="info fboxCol Xbetween font22">
				<view class="title color-36363A font28">{{innerData.materialsName}}</view>
				<view class="fboxRow" v-if="layoutType != 2">
					<view v-if="sys.platform == 'ios'" style="color: #E85531;">
						{{innerData.price == 0 ? '免费' : innerData.vipPrice == 0 && innerData.valuation == 1 ? 'VIP免费' : '--'}}
					</view>
					<template v-else>
					<view class="fboxRow Ycenter price-box" :class="layoutType == 2 ? 'flex1' : ''"
						v-if="layoutType == 0 || layoutType == 2">
						<view v-if="innerData.valuation != 1" class="font24" style="color: #E85531;">
							{{innerData.price == 0 ? '免费' : '￥'+innerData.price}}
						</view>
						<view v-else class="fboxRow Ycenter">
							<view class="color-969699 font20" style="text-decoration:line-through">
								￥{{innerData.price}}</view>
							<view class="font24" style="margin-left: 10rpx; color: #E85531;">
								{{innerData.vipPrice == 0 ? 'VIP免费': 'VIP￥'+innerData.vipPrice}}
							</view>
						</view>
					</view>
					</template>
				</view>
				<view class="color-6A6A6F">
					<block v-for="(item, index) in innerData.gradeTags" :key="index">{{index != 0 ? '，':''}}{{item}}
					</block>
					<text style="margin: 0 20rpx" v-if="innerData.gradeTags.length && innerData.tags.length">|</text>
					<block v-for="(item,index) in innerData.tags" :key="index">{{index != 0 ? '，':''}}{{item}}</block>
				</view>
			</view>
		</view>
		<view class="footer fboxRow Xbetween">
			<view class="font22 color-9899A1 flex1" v-if="layoutType == 0">
				<text class="bksCIcon bks-c-ziyuan16weishoucang font22"></text>
				<text style="margin: 0 29rpx 0 7rpx">{{innerData.collectNum}}</text>
				<text class="bksCIcon bks-c-ziyuan35chakan font22"></text>
				<text style="margin: 0 29rpx 0 7rpx">{{innerData.viewNum}}</text>
			</view>
			<view class="color-969699" :class="layoutType == 1 ? 'font24' : 'font22'"
				v-if="layoutType == 1 || layoutType == 0">{{innerData.gmtModified || innerData.gmtCreate }}</view>
			<block v-if="layoutType == 2">
				<view v-if="sys.platform == 'ios'" class="font24" style="color: #E85531;">
					{{innerData.price == 0 ? '免费' : innerData.vipPrice == 0 && innerData.valuation == 1 ? 'VIP免费' : '--'}}
				</view>
				<template v-else>
					<view class="fboxRow Ycenter price-box" :class="layoutType == 2 ? 'flex1' : ''"
						v-if="layoutType == 0 || layoutType == 2">
						<view v-if="innerData.valuation != 1" class="font24" style="color: #E85531;">
							{{innerData.price == 0 ? '免费' : '￥'+innerData.price}}
						</view>
						<view v-else class="fboxRow Ycenter">
							<view class="color-969699 font20" style="text-decoration:line-through">￥{{innerData.price}}
							</view>
							<view class="font24" style="margin-left: 10rpx; color: #E85531;">
								{{innerData.vipPrice == 0 ? 'VIP免费': 'VIP￥'+innerData.vipPrice}}
							</view>
						</view>
					</view>
				</template>
			</block>
			<view v-if="layoutType == 2">
				<text @tap="onCollect(innerData, index, false)" class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36" />
				<!-- <text v-if="!innerData.isCollected" @tap="onCollect(info, index, true)" class="bksCIcon bks-c-ziyuan16weishoucang color-C8C8CC font36" />
				<text v-else @tap="onCollect(info, index, false)" class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36" /> -->
			</view>
		</view>
		<view class="l-after"></view>
	</view>
</template>

<script>
	import {
		datumCollectionView
	} from '@/api/bks.datum.js'
	export default {
		props: {
			layoutType: {
				type: [Number, String],
				default: 0 // 0 收藏 | 2课堂 | 3 已购课程
			},
			// 是否跳转链接
			toLink: {
				type: Boolean,
				default: true,
			},
			// 当前项数据
			innerData: {
				type: Object,
				default: () => {
					return {
						"classifyId": "",
						"collectNum": 0,
						"duration": "",
						"format": "",
						"gmtCreate": "",
						"grade": "",
						"gradeTags": [],
						"img": "",
						"isCollected": false,
						"materialsId": "",
						"materialsName": "",
						"materialsTagId": "",
						"price": 0,
						"remark": "",
						"tags": [],
						"valuation": "",
						"viewNum": 0,
						"vipPrice": 0
					}
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				sys: {}
			}
		},
		mounted() {
			try{
				this.sys = uni.getSystemInfoSync();
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			pageto(e) {
				const {
					isDelete,
					isBan,
					materialsId,
					format
				} = this.innerData
				if (isDelete == 1) {
					uni.showToast({
						title: '资料已被删除',
						icon: 'none'
					})
				} else if (isBan == 1) {
					uni.showToast({
						title: '资料已被下架',
						icon: 'none'
					})
				} else {
					this.getView(materialsId)
					this.$pageTo('/bks/datum/detail/index', {
						id: materialsId,
						format,
						type: 'datum',
						back: 1
					})
				}
			},
			// 浏览数量
			getView(materialsId) {
				const params = {
					eventType: 0, // 事件类型0 浏览 1 收藏
					operationType: 1, //  操作类型 0 收藏 1 取消收藏 
					materialsId: materialsId
				}
				datumCollectionView(params).then(res => {})
			},
			onCollect(info, index, status){
				this.$emit('collect',{info, index, status})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.datum {
		padding: 30rpx 0;
		margin: 0 30rpx;
	}

	/*  border-bottom: 1px solid #EBEBF0; */
	.datum .top {
		margin-bottom: 21rpx;
		position: relative;
	}

	.datum .type {
		position: absolute;
		z-index: 1;
		top: 8rpx;
		left: 8rpx;
		padding: 4rpx 5rpx;
		border-radius: 2rpx;
	}

	.datum .top .avatarImg {
		width: 260rpx;
		height: 162rpx;
		border-radius: 8rpx;
		border: 1px solid #f0f0f5;
		overflow: hidden;
	}

	.datum .top .info {
		width: calc(100% - 309rpx);
		padding: 8rpx 0;
		margin-left: 21rpx;
	}

	.datum .top .info .title {
		line-height: 36rpx;
	}

	.datum .footer {
		height: 30rpx;
	}
</style>